import React, {Component} from 'react';
import {inject, observer} from "mobx-react";
import {Button, InputItem, List, Picker, TextareaItem, WhiteSpace, WingBlank} from "antd-mobile";
import {UploadDishStore} from "../store";
import MyCopper from "../../../util-biz/copper";
import {dishTypeArr, oilyDegreeArr, seasonArr} from "../../../util-biz/biz-constant";

interface IDishFormProps {
  uploadDishStore?: UploadDishStore | any;
}

@inject('uploadDishStore')
@observer
export default class DishForm extends Component<IDishFormProps, any> {

  render() {
    const {
      season,
      changeSeason,
      oilyDegree,
      changeOilyDegree,
      dishType,
      changeDishType,
      dishName,
      changeDishName,
      dishPic,
      changeDishPic,
      dishDesc,
      changeDishDesc,
      dishSource,
      changeDishSource,
      onSubmit,
      submitBtnStatus,
    } = this.props.uploadDishStore;
    return (
      <>
        <List.Item>菜品图片<span className="picTip">(限1张,jpg/jpeg/png格式)</span></List.Item>
        <div style={{paddingLeft: 7}}>
          <MyCopper type="1" files={dishPic?[{url: dishPic}]:[]} min={1} max={1} onSubmit={changeDishPic} onRemove={() => changeDishPic(null)}/>
        </div>

        <Picker
          data={seasonArr}
          value={[season]}
          cols={1}
          onChange={changeSeason}
        >
          <List.Item arrow="horizontal">适合季节</List.Item>
        </Picker>

        <Picker
          data={oilyDegreeArr}
          value={[oilyDegree]}
          cols={1}
          onChange={changeOilyDegree}
        >
          <List.Item arrow="horizontal">油腻程度</List.Item>
        </Picker>

        <Picker
          data={dishTypeArr}
          value={[dishType]}
          cols={1}
          onChange={changeDishType}
        >
          <List.Item arrow="horizontal">菜品种类</List.Item>
        </Picker>

        <InputItem
          placeholder="请输入菜名(20字以内)"
          value={dishName}
          onChange={changeDishName}
          clear
          maxLength={20}
        >菜名</InputItem>

        <InputItem
          placeholder="请填写菜名简介(100字以内)"
          value={dishDesc}
          onChange={changeDishDesc}
          clear
          maxLength={100}
        >菜品简介</InputItem>

        <TextareaItem
          title="菜品素材"
          value={dishSource}
          clear
          placeholder="请填写素材以及制作过程(1000字以内)"
          onChange={changeDishSource}
          autoHeight
          maxLength={1000}
        />

        <WhiteSpace/>

        <WingBlank>
          <Button
            type="primary"
            loading={submitBtnStatus === 3}
            onClick={onSubmit}
          >
            提交
          </Button>
        </WingBlank>

        <WhiteSpace/>
      </>
    );
  }


}
